<template>
  <el-card v-loading="loading"
           shadow="never"
           :style="{height: gadgetHeight + 'px', 'overflow': 'hiden'}"
           class="aui-card--fill">
    <template v-if="hasUndoneStatus">
      <h3 style="margin-top:0px">{{$t('custom.dashboard.layoutItem.stepgadgetTitle')}}</h3>
      <div class="cui-custom-css-get-started">
        <el-steps :active="nowSteps">
          <el-step v-for="(item, index) in dataSource"
                   :key="item.id"
                   :status="item.status === 'done'?'finish':'wait'"
                   :class="nowSteps === index?'is-active':''"
                   style="margin-left:10px;cursor:pointer;"
                   @click.native="openDialog(index)">
            <template slot="title">
              <div style="line-height: 18px;font-size:12px;">
                {{ item.name }}
              </div>
            </template>
          </el-step>
        </el-steps>
      </div>
    </template>
    <template v-else>
      <div class="image-block">
        <el-image fit='fill'
                  :style="{'width':'100%', 'height': gadgetHeight + 'px'}"
                  :src='comShowSetting.backgroundImageUrl'></el-image>
        <div class="image-block-content"
             :style="{'width':'100%', 'height': gadgetHeight + 'px'}">
          <div :style="{
            'color': comShowSetting.titleColor,
            'fontSize': comShowSetting.titleFontSize
            }">{{ comShowSetting.titleText }}</div>
          <div :style="{
            'color': comShowSetting.contentColor,
            'fontSize': comShowSetting.contetnFontSize
          }">{{ comShowSetting.contentText }}</div>
          <div :style="{
            'color': comShowSetting.buttonColor,
            'background': comShowSetting.buttonBackground,
            'width': comShowSetting.buttonWidth }"
               class="image-block-content-btn"
               @click="goToUrl(comShowSetting.buttonRouter)">
            {{ comShowSetting.buttonText }}
          </div>
        </div>
      </div>
    </template>
    <model :showSetting="queryModelDefaultSetting.showSetting"
           @queryModelClosed="queryModelClosed"
           :dataInfo="queryModelDefaultSetting.dataInfo"
           :updateGadget="upgradeGadgetSetting"  :slicer='slicer'/>
  </el-card>
</template>

<script>
import mixinGadgetViewModule from '@/mixins/gadget-view-module'
// import model from '@/components/gadget/query-model/query-model.vue'

export default ({
  mixins: [mixinGadgetViewModule],
  components: { model: () => import('@/components/gadget/query-model/query-model') },
  data: function () {
    return {
      dataSource: [],
      gadgetSetting: null,
      loading: false,
      nowSteps: this.$store.state.GetStarted.steps,
      getStartedDialogStatus: false,
      queryModelDefaultSetting: {
        showSetting: false,
        dataInfo: {
          businessId: this.pageId,
          gadgetId: this.id,
          gadgetType: this.gadgetInfo.com,
          gadgetSetting: {
            backgroundImageUrl: this.$ossLink + '/app/other/home-getstarted-background.png',
            titleText: 'Welcome to MSPbots!',
            titleColor: '#FFFFFF',
            titleFontSize: '18px',
            contentText: 'MORE AUTOMATION·MORE PROFIT',
            contentColor: '#FFFFFF',
            contetnFontSize: '12px',
            buttonText: 'Home',
            buttonColor: '#666666',
            buttonBackground: '#FFFFFF',
            buttonWidth: '80px',
            buttonRouter: '/Home'
          }
        }
      }
    }
  },
  computed: {
    hasUndoneStatus () {
      return Boolean(this.dataSource.findIndex(e => e.status === 'undone') !== -1)
    },
    comShowSetting () {
      try {
        if (this.gadgetSetting.backgroundImageUrl) {
          return this.gadgetSetting
        } else {
          return this.queryModelDefaultSetting.dataInfo.gadgetSetting
        }
      } catch (error) {
        return this.queryModelDefaultSetting.dataInfo.gadgetSetting
      }
    }
  },
  beforeCreate () {
    // this.$options.components.model = () => import('@/components/gadget/query-model/query-model')
  },
  created () {
    // this.query()
    this.gadgetHeight = (this.gadgetInfo.h * 20) + 3
    this.subscribeMessage('runReport', this.query)
    this.afterRegistShowGetStarted()
    this.$store.state.isWidget = false
  },
  methods: {
    addStyle(){
      this.$el.querySelector('.image-block-content').style.background = 'linear-gradient(270deg, #00000000 65%, #000000cc 90%)'
    },
    queryModelClosed () {
      this.queryModelDefaultSetting.showSetting = false
      this.query()
    },
    showQueryModel () {
      this.queryModelDefaultSetting.showSetting = true
    },
    resized (i, newH, newW, newHPx, newWPx) {
      this.gadgetHeight = (newH * 20) + 3
      this.gadgetWidth = newWPx
    },
    query () {
      this.loading = true
      this.dataSource = this.$store.state.GetStarted.configList
      this._.merge(this.gadgetSetting, this.queryModelDefaultSetting.dataInfo.gadgetSetting)
      var _self = this
      var param = {
        ...this.slicer,
        code: this.code,
        gadgettype: this.wgadgettype,
        widgetName: this.wName,
        pageId: this.pageId,
        gadgetId: this.id
      }
      this.$interface.reports.getReportDataInfo(param)
        .then(({ data: res }) => {
          _self.verifyHasData(res)
          if (res.config) {
            _self.gadgetSetting = Object.assign({}, _self._.merge(_self.gadgetSetting, res.config))
            // _self.autoRefresh = _self.gadgetSetting.IsAutoRefresh
            // if (_self.autoRefresh) {
            //   this.computedSyncTimer()
            // }
          }
          this.loading = false
        }).catch(() => {
          this.loading = false
        }).finally(() => {
          this.addStyle()
          this.loading = false
        })
    },
    openDialog (e) {
      this.$store.state.GetStarted.dialogStatus = true
      this.$store.state.GetStarted.steps = e
    },
    afterRegistShowGetStarted () {
      if (window.location.pathname === '/home') {
        let steps = this.$getQuery('getStartedSteps')
        if (steps || steps === '0') {
          this.openDialog(Number(steps))
          return false
        }
        // if (this.dataSource[0].status === 'undone') {
        const hasUndoneSteps = this.dataSource.findIndex(e => e.status === 'undone')
        if (hasUndoneSteps !== -1) {
          this.openDialog(hasUndoneSteps)
        }
      }
    },
    goToUrl () {
      window.open('https://mspbots.ai/', '_blank')
      // if (url.includes('http')) {
      //   window.open(url, '_blank')
      // } else {
      //   this.$router.push({ path: url })
      // }
    }
  }

})
</script>

<style lang="scss" scoped>
.image-block {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  &-content {
    position: absolute;
    top: 0;
    left: 0;
    padding: 16px 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    &-btn {
      cursor: pointer;
      border-radius: 6px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 8px 14px;
    }
  }
}
</style>
